<template>
  <div>
    <div style="margin-bottom: 10px;">
      <el-input v-model="realname" placeholder="通过名字进行查找" style="width: 200px;" prefix-icon="el-icon-search"
                @keyup.enter.native="loadPost"></el-input>
      <el-button type="primary" style="margin-left: 5px;" @click="loadPost">查询</el-button>
      <el-button type="success" style="margin-left: 5px;" @click="reset">重置</el-button>
    </div>
  <el-table
      :data="tableData"
      :header-cell-style="{background:'rgb(255,255,255)',color:'#000000'}"
      style="text-align: center"
      border="">
    <el-table-column
        prop="id"
        label="用户编号"
        width="100px"
    >
    </el-table-column>
    <el-table-column
        prop="stunum"
        label="学号"
        width="150px">
    </el-table-column>
    <el-table-column
        prop="realname"
        label="用户姓名"
        width="150px">
    </el-table-column>
    <el-table-column
        prop="gender"
        label="性别"
        width="150px">
      <template slot-scope="scope">
        <el-tag
            :type="scope.row.tag === '1' ? 'primary' : 'success'"
            disable-transitions>{{scope.row.gender === 1 ? '男' : '女'}}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column
        prop="phone"
        label="用户电话"
        width="150px">
    </el-table-column>
    <el-table-column
        prop="dormnum"
        label="宿舍号"
        width="150px">
    </el-table-column>
    <el-table-column
        prop="tag"
        label="用户标签"
        width="150px">
      <template slot-scope="scope">
        <el-tag
            :type="scope.row.tag === '1' ? 'danger' : 'success'"
            disable-transitions>{{scope.row.repair === 1 ? '维修者' : '普通用户'}}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="operate" label="操作" width="">
      <template slot-scope="scope">
        <el-button size="small" type="primary" @click="update(scope.row)">编辑</el-button>
        <el-popconfirm
            title="确定删除吗？"
            @confirm="remove(scope.row.id)"
            style="margin-left: 5px"
        >
          <el-button slot="reference" size="small" type="danger">删除</el-button>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>

    <el-pagination
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page="page"
        :page-sizes="[10,20]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.total">
    </el-pagination>


    <el-dialog
        title="提示"
        :visible.sync="centerDialogVisible"
        width="30%"
        center>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="id">
          <el-col :span="10">
            <el-input v-model="form.id"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="用户姓名">
          <el-col :span="10">
            <el-input v-model="form.realname"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="维修者">
          <el-col :span="10">
            <el-input v-model="form.repair"></el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="remove">取 消</el-button>
    <el-button type="primary" @click="save">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "main",
  data(){
    return{
      tableData:[],
      total:0,
      page:1,
      size:10,
      realname:'',
      centerDialogVisible:false,
      form:{
        id:'',
        realname:'',
        repair:''
      }
    }
  },
  mounted() {
    this.loadPost();
    this.loadGet();
    // this.loadPost_2();
    // this.initUser();
  },
  methods:{
    async loadGet(){
      this.$axios.get(this.$httpUrls+'/user/all').then(res=>res.data).then(res=>{
        console.log(res)
        this.tableData=res
      })
    },
    async loadPost(){
      this.$axios.post(this.$httpUrls+"/user/page/?realname="+this.realname+"&?page="+this.page+"&?size="+this.size,{
        page:this.page,
        size:this.size,
        realname:this.realname,
      }).then(resp=>{
        console.log(resp.data.data);
        this.tableData = resp.data.data;
        this.total = resp.data.total;
      })
    },
    reset(){
      this.realname=''
    },
    update(row){
      console.log(row)
      this.form.repair = row.repair
      this.form.id = row.id
      this.form.realname = row.realname
      this.centerDialogVisible = true
    },
    remove(id){
      console.log(id)
      this.$axios.post(this.$httpUrls+'/user/delete?id='+id).then(resp=>{
        console.log(resp.data.data)
        if (resp.data.code==200){
          this.$message({
            message:'操作成功',
            type:'success'
          })
        }else {
          this.$message({
            message:'操作失败',
            type:'warning'
          })
        }
      })
    },
    dosave(){
      this.$axios.post(this.$httpUrls+'/user/AddOrUpdate',this.form).then(resp=>{
        console.log(resp.data.data)
        if (resp.data.code==200){
          this.$message({
            message:'操作成功',
            type:'success'
          })
        }else {
          this.$message({
            message:'操作失败',
            type:'warning'
          })
        }
      })
    },
    save(){
      if (this.form.repair){
        this.dosave()
      }
    },
    sizeChange(size) {
      console.log(`每页 ${size} 条`);
      this.size=size;
      this.loadPost();
    },
    currentChange(page) {
      console.log(`当前页: ${page}`);
      this.page=page;
      this.loadPost();
    },
    },

  beforeMount() {
    this.loadPost();
    this.reset();
  }
}
</script>


<style scoped>

</style>